<template>
  <div class="wh100">
    <div class="boxOne box">
      <div class="title-wrap">
        <div class="title">监督检查</div>
      </div>
      <div class="content-wrap flex_align">
        <div class="oneform flex_column">
          <div class="titleHead flex_between">
            <div class="textT">案件总数</div>
            <div>共<span class="numT">{{ajzs}}</span>件</div>
          </div>
          <div class="content flex_1 flex_column">
            <div v-for="(item,index) in ajzsList" :key="'ajzs'+index">
              <div class=" flex_between">
                <div>{{item.title}}</div>
                <div class="num">{{item.num}}件</div>
              </div>
              <div class="line">
                <div class="bg" :style="{width:(Number(item.num)/Number(ajzs)*100).toFixed(2)+'%'}">
                  <div class="locat">
                    <div class="percent">{{ (Number(item.num)/Number(ajzs)*100).toFixed(0)+'%' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="oneform flex_column green">
          <div class="titleHead flex_between">
            <div class="textT">案件总数</div>
            <div>共<span class="numT">{{zgqk}}</span>件</div>
          </div>
          <div class="content flex_1 flex_column">
            <div v-for="(item,index) in zgqkList" :key="'ajzs'+index">
              <div class=" flex_between">
                <div>{{item.title}}</div>
                <div class="num">{{item.num}}件</div>
              </div>
              <div class="line">
                <div class="bg" :style="{width:(Number(item.num)/Number(zgqk)*100).toFixed(2)+'%'}">
                  <div class="locat">
                    <div class="percent">{{ (Number(item.num)/Number(zgqk)*100).toFixed(0)+'%' }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="oneChart flex_1" id="zgqk-line"></div>
      </div>
    </div>
    <!--  -->
    <div class="boxTwo box">
      <div class="title-wrap" style="justify-content: space-between;">
        <div class="title">质量检查</div>
        <div class="year flex_align">
          <div class="y_item" :class="{'active':currYear==item.value}" v-for="(item,index) in tabYear" :key="'tabYear'+index" @click="onSelYear('currYear',sitem.value)">{{item.title}}</div>
        </div>
      </div>
      <div class="content-wrap flex_align">
        <div class="qualityPie" id="qualityPie"></div>
        <div class="qualityBar flex_1" id="qualityBar"></div>
      </div>
    </div>
    <!--  -->
    <div class="boxThree box">
      <div class="title-wrap" style="justify-content: space-between;">
        <div class="title">安全整改</div>
        <div class="year flex_align">
          <div class="y_item" :class="{'active':currYear2==item.value}" v-for="(item,index) in tabYear" :key="'tabYear'+index" @click="onSelYear('currYear2',sitem.value)">{{item.title}}</div>
        </div>
      </div>
      <div class="content-wrap flex_align">
        <div class="safetyPie" id="safetyPie"></div>
        <div class="safetyBar flex_1" id="safetyBar"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      ajzs: '1534',//案件总数
      ajzsList: [
        { title: '安全相关', num: '61' },
        { title: '质量相关', num: '231' },
        { title: '其他', num: '712' },
      ],
      zgqk: '23',
      zgqkList: [
        { title: '已整改', num: '15' },
        { title: '已延期', num: '4' },
        { title: '待整改', num: '8' },
      ],
      ajzsStr: {
        data: [
          {
            name: '已整改', data: [65, 55, 64, 72, 48, 67, 74, 69, 72],
            startColor: 'rgba(30, 112, 250, 0.20)', endColor: 'rgba(30, 112, 250, 0)'
          },
          {
            name: '已延期', data: [33, 38, 43, 44, 47, 46, 51, 46, 42],
            startColor: 'rgba(253, 191, 84, 0.20)', endColor: 'rgba(253, 191, 84, 0)'
          },
          {
            name: '待整改', data: [22, 34, 26, 31, 27, 28, 25, 33, 31],
            startColor: 'rgba(6, 214, 160, 0.20)', endColor: 'rgba(6, 214, 160, 0)'
          },
        ],
        xData: ['2022.12', '2023.01', '2023.02', '2023.03', '2023.04', '2023.06', '2023.07', '2023.08', '2023.09']
      },
      chartInstance: {},
      currYear: 1,//当前选择年
      currYear2: 1,//安全整改
      tabYear: [
        { title: '月', value: 1 },
        { title: '年', value: 2 }
      ],
      qualityPieData: {
        title: '整改情况',
        data: [
          { value: 60, name: '已整改' },
          { value: 30, name: '已延期' },
          { value: 10, name: '待整改' },
        ],
        color: ['#1E70FA', '#FDBF54', '#06D6A0'],
        center: ['35%', '50%'],
        titleCenter: ['34%', '45%']
      },
      safetyPieData: {
        title: '整改情况',
        data: [
          { value: 60, name: '已整改' },
          { value: 30, name: '已延期' },
          { value: 10, name: '待整改' },
        ],
        color: ['#1E70FA', '#FDBF54', '#06D6A0'],
        center: ['35%', '50%'],
        titleCenter: ['34%', '45%']
      },
      safetyBarData: {
        color: ['#FDBF54', '#1E70FA', '#5AC931'],
        barWidth: [4, 4, 4],
        data: [
          { a1: '10', a2: '20', a3: '30' },
          { a1: '20', a2: '40', a3: '50' },
          { a1: '40', a2: '50', a3: '80' },
          { a1: '60', a2: '60', a3: '70' },
          { a1: '80', a2: '70', a3: '30' },
          { a1: '90', a2: '30', a3: '40' },
          { a1: '30', a2: '40', a3: '80' },
          { a1: '40', a2: '90', a3: '90' },
          { a1: '50', a2: '20', a3: '30' },
          { a1: '80', a2: '40', a3: '40' },
          { a1: '40', a2: '80', a3: '80' },
          { a1: '30', a2: '90', a3: '90' },
          { a1: '60', a2: '30', a3: '20' },
          { a1: '80', a2: '40', a3: '10' },
          { a1: '70', a2: '70', a3: '70' },
          { a1: '40', a2: '50', a3: '30' },
          { a1: '60', a2: '70', a3: '90' },
          { a1: '90', a2: '90', a3: '10' },
          { a1: '100', a2: '30', a3: '20' },
          { a1: '30', a2: '40', a3: '30' },
          { a1: '10', a2: '60', a3: '60' },
          { a1: '20', a2: '80', a3: '80' },
          { a1: '50', a2: '20', a3: '90' },
          { a1: '30', a2: '10', a3: '20' },
          { a1: '80', a2: '50', a3: '40' },
          { a1: '40', a2: '60', a3: '70' },
          { a1: '80', a2: '80', a3: '100' },
          { a1: '90', a2: '40', a3: '20' },
          { a1: '20', a2: '60', a3: '30' },
          { a1: '90', a2: '90', a3: '70' },
          { a1: '30', a2: '10', a3: '80' },
        ],
        xData: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31']
      },
      qualityBarData: {
        color: ['#FDBF54', '#1E70FA', '#5AC931'],
        barWidth: [10, 10, 10],
        data: [
          { a1: '10', a2: '20', a3: '30' },
          { a1: '20', a2: '40', a3: '50' },
          { a1: '40', a2: '50', a3: '80' },
          { a1: '10', a2: '20', a3: '30' },
          { a1: '20', a2: '40', a3: '50' },
          { a1: '40', a2: '50', a3: '80' },
          { a1: '10', a2: '20', a3: '30' },
          { a1: '20', a2: '40', a3: '50' },
          { a1: '40', a2: '50', a3: '80' },
          { a1: '10', a2: '20', a3: '30' }
        ],
        xData: ['2022.12', '2023.01', '2023.02', '2023.03', '2023.04', '2023.05', '2023.06', '2023.07', '2023.08', '2023.09']
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.drawLine('zgqk-line', this.ajzsStr)
      this.drawPie('qualityPie', this.qualityPieData)
      this.drawPie('safetyPie', this.safetyPieData)
      this.drawBar('safetyBar', this.safetyBarData)
      this.drawBar('qualityBar', this.qualityBarData)
    },
    drawBar(id, params) {
      let chartDom = document.getElementById(id);
      if (this.chartInstance[id + '-Bar']) {
        this.chartInstance[id + '-Bar'].dispose()
      }
      let myChart = echarts.init(chartDom);
      this.chartInstance[id + '-Bar'] = myChart
      let option;
      option = {
        grid: {
          top: '30px',
          left: '5%',
          right: '2%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: "true",
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          // valueFormatter: (val) => {
          //   return `${val}万元`
          // }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#F0F0F0',
            }
          },
          splitNumber: 5,
          // name: '万元',
          nameLocation: 'end',
          nameTextStyle: {
            align: 'right'
          }
        },
        xAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#707070',
              }
            },
            axisLabel: {
              color: '#7C7C7C'
            },
            data: params.xData
          }
        ],
        legend: {
          orient: 'horizontal',
          right: '0',
          formatter: function(name) {
            return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
          },
          tooltip: {
            show: true,
            confine: true
          }
        },
        series: [
          {
            name: '已延期',
            type: 'bar',
            itemStyle: {
              show: true,
              color: params.color[0],
              borderRadius: [20, 20, 0, 0]
            },
            barWidth: params.barWidth[0],
            data: params.data.map(e => e.a1)
          },
          {
            name: '已整改',
            type: 'bar',
            itemStyle: {
              show: true,
              color: params.color[1],
              borderRadius: [20, 20, 0, 0]
            },
            barWidth: params.barWidth[1],
            data: params.data.map(e => e.a2)
          },
          {
            name: '待整改',
            type: 'bar',
            itemStyle: {
              show: true,
              color: params.color[2],
              borderRadius: [20, 20, 0, 0]
            },
            barWidth: params.barWidth[2],
            data: params.data.map(e => e.a3)
          }
        ]
      }
      option && myChart.setOption(option);
    },
    drawPie(id, params) {
      let chartDom = document.getElementById(id);
      if (this.chartInstance[id + '-Pie']) {
        this.chartInstance[id + '-Pie'].dispose()
      }
      let myChart = echarts.init(chartDom);
      this.chartInstance[id + '-Pie'] = myChart
      let option;
      option = {
        title: {
          text: params.title,
          left: params.titleCenter[0],
          top: params.titleCenter[1],
          textStyle: {
            color: '#000',//'red'，字体颜色
            fontSize: 16,//字体大小
            lineHeight: 16,//字体行高
          },
          textAlign: 'center'
        },
        color: params.color,
        tooltip: {
          trigger: 'item',
          confine: true
        },
        legend: {
          type: 'scroll',
          top: 'center',
          formatter: function(name) {
            return echarts.format.truncateText(name, 100, '14px Microsoft Yahei', '…');
          },
          tooltip: {
            show: true,
            confine: true
          },
          right: '0%',
          orient: 'vertical',
          icon: 'circle',
          pageButtonGap: 1,
          itemHeight: 6, // 图例icon高度
          itemWidth: 6, // 图例icon宽度
          itemGap: 20,
        },
        series: [
          {
            name: '整改情况',
            type: 'pie',
            radius: ['45%', '60%'],
            center: params.center,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: params.data,
            itemStyle: {
              borderWidth: 2,
              borderColor: '#fff'
            }
          }
        ]
      };
      option && myChart.setOption(option);
    },
    drawLine(id, params) {
      let chartDom = document.getElementById(id);
      if (this.chartInstance[id + '-Line']) {
        this.chartInstance[id + '-Line'].dispose()
      }
      let option = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          show: true,
          right: '5%',
          top: '0',
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '8%',
          top: '18%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: params.xData,
          axisLabel: {
            //x轴文字的配置
            show: true,
            align: 'center',
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          axisTick: {
            show: false,
          },
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(112, 112, 112, 1)',
            },
          },
        },
        yAxis: {
          type: 'value',
          // max: 100,
          // min: 0,
          // interval: 25,
          minInterval: 1,
          // 文字颜色
          axisLabel: {
            textStyle: {
              color: '#7C7C7C',
              fontSize: '14px',
            },
          },
          splitLine: {
            //分割线配置
            show: true,
            lineStyle: {
              color: 'rgba(112, 112, 112, 0.1)',
              type: 'solid',
            },
          },
        },
        series: params.data.map(item => ({
          name: item.name,
          type: 'line',
          data: item.data,
          symbol: 'emptyCircle',
          symbolSize: 5,
          smooth: true,
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: item.startColor,
              },
              {
                offset: 1,
                color: item.endColor,
              },
            ]),
          },
        }))

      }
      let myChart = echarts.init(chartDom)
      myChart.clear()
      this.chartInstance[id + '-Line'] = myChart
      myChart.setOption(option, true)
    },
    onSelYear(str, value) {
      this[str] = value
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/homepage.scss";
.title-wrap {
  height: 48px;
  border-bottom: 1px #e6e8ef solid;
  display: flex;
  align-items: center;
  position: relative;
  padding-left: 12px;
  margin-bottom: 12px;
  &::after {
    content: "";
    display: block;
    height: 4px;
    width: 4px;
    background-color: #005fff;
    border-radius: 4px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
  }
  .title {
    font-weight: bold;
    font-size: 16px;
  }
}
.content-wrap {
  flex: 1 1 0%;
}

.year {
  background-color: #f2f6ff;
  border-radius: 8px;
  .y_item {
    min-width: 82px;
    color: #005fff;
    font-size: 14px;
    white-space: nowrap;
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 27px;
    box-sizing: border-box;
    &.active {
      background-color: #1e70fa;
      color: white;
    }
  }
}

.box {
  background-color: white;
  border-radius: 15px;
  padding: 0 23px;
  display: flex;
  flex-direction: column;
}

.boxOne {
  height: calc(34% - 32px);
  margin-bottom: 16px;
  .title-wrap {
    margin-bottom: 0;
  }
  .oneform {
    width: 20%;
    height: 80%;
    margin-right: 38px;
    font-size: 14px;
    color: #333333;
    .titleHead {
      background-color: #e6efff;
      border-radius: 5px;
      color: #4d4d4d;
      padding: 8px 12px;
      .textT {
        font-weight: bold;
        color: #000000;
      }
      .numT {
        color: #1e70fa;
        font-weight: bold;
        padding: 0 2px;
        font-size: 20px;
      }
    }
    .content {
      padding: 10px 15px 0;
      justify-content: space-between;
      .mr {
        // margin-bottom: 4px;
      }
      .num {
        color: #1e70fa;
      }
      .line {
        width: 100%;
        height: 10px;
        background-color: #e4ecfc;
        border-radius: 8px;
        .bg {
          height: 100%;
          background-color: #1e70fa;
          border-radius: 8px;
          cursor: pointer;
          position: relative;
          .locat {
            position: absolute;
            top: -35px;
            right: -20px;
            opacity: 0;
          }
          .percent {
            min-width: 50px;
            border: 1px solid #1e70fa;
            background-color: white;
            color: #1e70fa;
            text-align: center;
            line-height: 1;
            padding: 4px 5px 3px;
            position: relative;
            &::after {
              content: "";
              width: 0px;
              height: 0px;
              border: 8px solid transparent;
              border-top: 8px solid #0082df;
              position: absolute;
              left: 50%;
              bottom: -15px;
              margin-left: -5px;
            }
            &::before {
              content: "";
              z-index: 1;
              width: 0px;
              height: 0px;
              border: 7px solid transparent;
              border-top: 7px solid #fff;
              position: absolute;
              left: 50%;
              bottom: -12px;
              margin-left: -4px;
            }
          }
          &:hover > .locat {
            opacity: 1;
          }
        }
      }
    }
    &.green {
      .titleHead {
        background-color: #e9f8f4;
        .numT {
          color: #06d6a0;
        }
      }
      .content {
        .num {
          color: #06d6a0;
        }
        .line {
          background-color: #e3f5f0;
          .bg {
            background-color: #0bd9a4;
            .percent {
              border-color: #0bd9a4;
              color: #0bd9a4;
              &::after {
                border-top-color: #0bd9a4;
              }
            }
          }
        }
      }
    }
  }
  .oneChart {
    width: 1%;
    height: 100%;
    overflow: hidden;
  }
}

.boxTwo {
  height: 33%;
  margin-bottom: 16px;
  .qualityPie {
    width: 22%;
    height: 100%;
  }
  .qualityBar {
    height: 100%;
  }
}

.boxThree {
  height: 33%;
  .safetyPie {
    width: 22%;
    height: 100%;
  }
  .safetyBar {
    height: 100%;
  }
}
</style>
